<template>
    <div class="iot_char" v-show="chartvisible">
      <v-chart  :options="polar" style="width:20vw;height:29vh"/>    
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
name: "wlevelchart",
 data () {
    return {
        polar:
        {
            title: {
                text: '水位统计图',
                x: 'center',
                textStyle:{
                    color: '#ffffff'
                }
            },
           tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            dataZoom:[{
                    type:'inside',
                    
                    filterMode: 'empty',
                    start: 0,
                    end: 100

                }],
           xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [],
                axisLine:{ //坐标轴轴线相关设置。
                    lineStyle:{
                    color:'#ffffff', //坐标轴线线的颜色。
                    width:1,//这里是为了突出显示加上的
                    }
                }
           },
          yAxis: {
              type: 'value',
              name : '(/m)',
              axisLine:{ //坐标轴轴线相关设置。
                    lineStyle:{
                    color:'#ffffff', //坐标轴线线的颜色。
                    width:1,//这里是为了突出显示加上的
                    }
                }
           },
          series: [{
              data: [],
              type: 'line',
              areaStyle: {}
          }]
        },
       chartvisible:false

    }
 },
 methods:{
      getcoldata:function(selectip){ //
              //发送get请求
                  this.polar.series[0].data=[];
                  this.polar.xAxis.data=[];
                  this.$http.get('http://localhost:8080/tccp/user/getAllUser').then(function (res) {
                      
                        
                      for (let i = 0; i<res.data.length; i++) {
                        // console.log(res.data[i].aid);
                          if(res.data[i].ip==selectip){
                            this.polar.series[0].data.push(res.data[i].wlevel);
                            this.polar.xAxis.data.push(res.data[i].time);
                          }
                        }
                    })
                    .catch(function (error) {
                      console.log(error);
                    });  
      },
     
      
  },
 computed: { //计算属性 取存在状态库中的值
     ...mapGetters(["chartSet"]),
     listenchartSet(){  //监听 chartSet值的变化
       return this.chartSet;
     },
     ...mapGetters(["selectip"]),
     listenselectip() {
      return this.selectip;
    },
  },
  watch:{
      listenselectip(vag) {
      // console.log(vag);
      
      this.getcoldata(vag);
    },
      listenchartSet:{
          handler(vag){  //handler执行具体方法
            if(vag.name=='wlevel') //
            {
             
                //this.getcoldata(vag.timeframe[0],vag.timeframe[1],vag.limit);
                this.chartvisible=vag.chartvisible;
            }
        },
        deep: true//是否深度监听设置deep: true  则可以监听到vag.timeframe的变化，此时会给vag的所有属性都加上这个监听器，
        //immediate: true 代表如果在 wacth 里声明了 变量 之后，就会立即先去执行里面的handler方法
      }
  },
  mounted:function(){//页面初始化函数
        // this.getcoldata("2019-03-17 13:02:31","2019-03-22 15:18:55",20);
        //this.LopTime();
        this.getcoldata(this.selectip);
  }
}
</script>